<template>
  <div class="list table pnx fill" ref="list">
    <div class="th tr text-info">
      <div class="td1">歌曲</div>
      <div class="td2">歌手</div>
      <div class="td3">专辑</div>
    </div>
    <div @dblclick="handlePlay(index)" class="tr songItem" :class="{active: item.mid===currentSong.mid}"
         v-for="(item, index) in list" :key="index">
      <div class="td1  pnx">{{ item.name }}</div>
      <div class="td2 plr">
        <SingerDisplay :singer="item.singer"/>
      </div>
      <div class="td3 no-wrap" @click="handleAlbumDetail(item.albumMid)">{{ item.albumName }}</div>
    </div>
    <div class="ctrl flex-col">
      <div class="item" @click="handleToTop">
        <WIcon size="30" icon="icon-upward"/>
      </div>
      <div class="item" @click="handleShot" v-if="showToTarget">
        <WIcon v-if="showToTarget" size="30" icon="icon-weibiaoti1"/>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {Component, Inject, Prop, Vue} from "vue-property-decorator";
import {Song} from "@/ts.d/classes/Song";
import SingerDisplay from "@/components/listDisplay/SingerDisplay.vue";
import {Path} from "@/ts.d/interfaces/Path";
import {State} from "vuex-class";
import WIcon from "@/components/icon/WIcon.vue";

@Component({
  components: {WIcon, SingerDisplay}
})
export default class ListDisplay extends Vue {
  @State("currentSong") currentSong !: Song
  @State("currentPlayList") currentPlayList !: Song[]
  @Prop() list!: Song[]

  @Inject() redirectTo!: (path: Path) => void

  @Inject() startPlay!: (list: Song[], index: number) => void

  get showToTarget() {
    const diff = this.currentPlayList.length !== this.list.length ||  this.currentPlayList.some((o, index) => this.currentPlayList[index]!==this.list[index])
    return !diff
  }

  handleAlbumDetail(id: number) {
    this.redirectTo({
      type: "album",
      mid: id,
      is: "Album"
    })
  }

  handlePlay(index: number) {
    this.startPlay(this.list, index)
  }


  handleShot() {
    const dom = this.$refs.list as HTMLElement
    const activeDom = dom.querySelector("div.active") as HTMLElement
    this.$parent.$el.scrollTo({
      left: 0,
      top: activeDom.offsetTop - activeDom.offsetHeight,
      behavior:"smooth"
    })
  }

  handleToTop() {
    this.$parent.$el.scrollTo({
      left: 0,
      top: 0,
      behavior:"smooth"
    })

  }
}
</script>

<style scoped lang="scss">
@import "~@/assets/css/var";


.tr {
  display: flex;
  padding: 15px 0;

  .td1 {
    width: 50%;
  }

  .td2 {
    width: 25%;

  }

  .td3 {

    width: 25%;
  }
}

.songItem {
  .td3 {
    cursor: pointer;

    &:hover {
      color: $text-primary;
    }
  }
}

.active {
  background-color: rgba(255, 255, 255, 0.3);
  color: $text-success;
}

.songItem {
  &:hover:not(.active) {
    background-color: rgba(255, 255, 255, 0.2);
  }
}

.ctrl{
  position: fixed;
  opacity: 0.5;
  background-color: rgba(0,0,0,0.2);
  right: 50px;
  bottom: 100px;
  color: wheat;
  &:hover{
    opacity: 1;
  }
  .item{

    cursor: pointer;
    &:hover{
      background-color: rgba(255,255,255,0.2);
    }
  }
}
</style>
